<template>
    <div>价格:{{ price }}</div>
    <div>数量:{{ num }}<button @click="changeNum">+</button></div>
    <div>总价:{{ total }} <button @click="changeTotal(100)">更改总价</button></div>
    
</template>
<!-- 
   一、选项式计算属性
   1、计算属性概念：计算属性来描述依赖响应式状态的复杂逻辑
   依赖与响应式数据,当响应式数据变化后，结果也会发生变化
   2、语法
   2.1、简写形式
     computed:{
        计算属性(){
           return 计算属性的结果
        }
     }
   2.2、标准形式：
     computed:{
        计算属性:{
           set(参数){

           }
           get(){
              return 计算属性结果
           }
        }
     }
 -->
<script lang='ts'>
   export default{
      data(){
         return{
            price:23,
            num:3
         }
      },
      methods:{
         changeNum(){
            this.num++
         },
         changeTotal(arg:number){
            this.total=arg
            
         }
      },
      computed:{
         // total(){
         //    return this.price*this.num
         // }
         total:{
            get(){
               return this.price*this.num
            },
            set(arg:number){
               this.num=parseInt((arg/this.price)+"")
            }
         }
      }
   }
</script>

<style lang='scss' scoped>
</style>